<template>
  <a-spin :spinning="tableLoad" size="large">
  <a-layout>
    <a-layout-content style="background: #fff;">
      <a-Row :gutter="16">
        <a-Col :md="18" :xs="24">
          <a-form>
            <a-form-item required label="触发器名称:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input style="width: 300px" v-model="formItem.name" placeholder="请输入名称" />
            </a-form-item>
            <a-form-item required label="数据点:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select v-model="formItem.equipment_id" @change="equiChange" class="mr10" style="width: 300px" placeholder="请选择设备">
                <a-select-option v-for="item in equipmentData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
              </a-select>
              <a-select v-model="formItem.register_id" notFoundContent="未选择设备或设备未添加寄存器" style="width: 300px" placeholder="请选择寄存器">
                <a-select-option v-for="item in equiItemDetail" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item required label="触发条件:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select @change="conditionChange" v-model="formItem.condition" class="mr10" style="width: 300px" placeholder="请选择触发条件">
                <a-select-option :value="1">开关Off</a-select-option>
                <a-select-option :value="2">开关ON</a-select-option>
                <a-select-option :value="3">数据低于A</a-select-option>
                <a-select-option :value="4">数据高于B</a-select-option>
                <a-select-option :value="5">数据介于AB之间</a-select-option>
                <a-select-option :value="6">数据高于B低于A</a-select-option>
                <a-select-option :value="7">数据等于A</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item v-if="triggerShow" required label="条件参数:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input-group compact>
                <a-col v-if="AShow" :sm="10" :xs="24">
                  A：<a-input style="width: 80%" v-model="formItem.data_a" placeholder="数据A" />
                </a-col>
                <a-col v-if="BShow" :sm="10" :xs="24">
                  B：<a-input style="width: 80%" v-model="formItem.data_b" placeholder="数据B" />
                </a-col>
              </a-input-group>
            </a-form-item>
            <a-form-item label="报警方式:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-checkbox-group :options="plainOptions" v-model="formItem.type" @change="onChange" />
            </a-form-item>
            <a-form-item required label="报警间隔时间:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input-group compact style="width: 300px">
                <a-input :min="0" type="number" style="width: 244px" v-model="formItem.interval_time" placeholder="报警间隔时间 (单位：分钟)" />
                <a-input
                  style=" width: 56px;  pointer-events: none; backgroundColor: #fff"
                  placeholder="分钟"
                  disabled
                />
              </a-input-group>
            </a-form-item>
            <a-form-item label="触发状态:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-radio-group :options="options" @change="onChange2" v-model="formItem.status" />
            </a-form-item>
            <a-form-item label="报警联系组:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-transfer 
                :dataSource="contactsGroupData" 
                :titles="['未选', '已选']" 
                :locale="{notFoundContent: '未选择设备或设备无联系人组',}"
                :listStyle="{ width: '230px',height: '300px'}"
                :targetKeys="formItem.contact_ids" 
                :selectedKeys="selectedKeys" 
                @change="handleChange" @selectChange="handleSelectChange"
                :render="item=>item.title" />
            </a-form-item>
            <!-- <a-form-item label="报警死区:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input style="" v-model="formItem.dead_zone" placeholder="请输入报警死区" />
            </a-form-item> -->
            <!-- <a-form-item required label="报警推送内容:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input style="" v-model="formItem.content" placeholder="请输入报警推送内容" />
            </a-form-item>
            <a-form-item required label="恢复正常推送内容:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input style="" v-model="formItem.reply_content" placeholder="请输入恢复正常推送内容" />
            </a-form-item> -->
            <a-form-item :wrapper-col="{ span: 16, offset: 4  }">
              <a-button
                  class="mr20"
                  style="width: 150px;"
              		type="primary"
              		html-type="submit"
              		:loading="confirmLoading"
              		@click="addBtn"
              	 >提交</a-button>
                 <a-button type="danger" style="width: 150px;" @click="returnBtn">返回触发器列表</a-button>
              </a-form-item>
            </a-form-item>
          </a-form>
        </a-Col>
        <a-Col :md="6" :xs="24">
          <a-Card class="mb20">
            <div slot="title">
              触发器名称
            </div>
            <div>
              给这个报警起一个名称
            </div>
          </a-Card>
          <a-Card bordered class="mb20">
            <div slot="title">
              数据点
            </div>
            <div>
              就是设备名称和寄存器
            </div>
          </a-Card>
          <a-Card bordered class="mb20">
            <div slot="title">
              报警联系组
            </div>
            <div>
              报警联系组是设备对应的联系人分组
            </div>
          </a-Card>
          <!-- <a-Card bordered class="mb20">
            <div slot="title">
              报警死区
            </div>
            <div>
              <p>报警死区的作用是为了防止变量值在报警限上下频繁波动时，产生许多不真实的报警，在原报警限上下增加一个报警限的阈值，使原报警限界线变为一条报警限带。</p>
              <p>例如：设定触发器高于100时触发报警，设定报警死区为10，则设备只有在大于110时才会触发报警推送，在小于90时才会恢复正常状态。</p>
            </div>
          </a-Card> -->
        </a-Col>
      </a-Row>

    </a-layout-content>
  </a-layout>
  </a-spin>
</template>
<script>
  import { mapState, mapActions } from 'vuex';
  // {label:'邮件',value: 3}
  const plainOptions = [{label:'短信',value: 1},{label:'微信',value: 2},];
  const options = [{label: '禁用',value: 0,},{label: '启用',value: 1,}]
  export default {
    name: "AddTrigger",
    data() {
      return {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 18
          },
        },
        // mockData, //穿梭框
        selectedKeys: [],

        /* 测试end */
        triggerShow: false,
        AShow: true,
        BShow: true,
        plainOptions, //多选组
        options, //单选组

        /* 添加编辑 */
        confirmLoading: false,//按钮loading状态
        tableLoad: false,
        formItem:{
          name: '',           //触发器名称
          equipment_id: undefined,   //设备ID
          register_id: undefined,    //寄存器ID
          condition: undefined,      //触发条件
          data_a: '',         //数据A
          data_b: '',         //数据B
          interval_time: '',  //时间间隔
          type: [],           //报警方式
          status: 0,         //触发状态
          contact_ids: [],    //报警联系人/组
          // dead_zone: '',      //报警死区
          content: '',        //报警推送内容
          reply_content: '',  //恢复正常推送内容
        },
        /* 添加编辑end */

      }
    },
    computed: {
      ...mapState({
        itemDetail: state => state.alertTrigger.itemDetail,// 详情
        equipmentData: state => state.equipment.equipmentData, //设备名称信息
        equiItemDetail: state => state.equiRegister.itemDetail, //设备寄存器信息
        contactsGroupData: state => state.alertContactsGroup.contactsGroupData,
      }),
    },
    watch: {
      itemDetail() {
        this.tableLoad = true
        console.log(this.itemDetail);
        this.equiChange(this.itemDetail.equipment_id)
        this.formItem = {
          id:this.itemDetail.id,
          name: this.itemDetail.name,           //触发器名称
          equipment_id: Number(this.itemDetail.equipment_id),   //设备ID
          register_id: Number(this.itemDetail.register_id),    //寄存器ID
          condition: Number(this.itemDetail.condition),      //触发条件
          type: this.itemDetail.type != null ? this.itemDetail.type.split(",").map(Number) : [],           //报警方式
          data_a: this.itemDetail.data_a,
          data_b: this.itemDetail.data_b,
          interval_time: this.itemDetail.interval_time,
          status: Number(this.itemDetail.status),         //触发状态
          contact_ids: this.itemDetail.contact_ids != null ? this.itemDetail.contact_ids.split(",").map(String) : [],    //报警联系人/组
          // dead_zone: this.itemDetail.dead_zone,      //报警死区
          content: this.itemDetail.content,        //报警推送内容
          reply_content: this.itemDetail.reply_content,  //恢复正常推送内容
        }
         this.conditionChange(Number(this.itemDetail.condition))
         setTimeout(() => {
           this.tableLoad = false
         }, 1000);
      },
    },
    mounted() {
      this.equipmentAll()
      this.registerDetail(false)
      this.contactsGroup(false)
      console.log(this.$route.params.id);
      if (this.$route.params.id) {
        this.dataDetail(this.$route.params.id)
      } else {

      }
    },
    methods: {
      ...mapActions({
        dataAdd: 'alertTrigger/dataAdd', //添加
        dataEdit: 'alertTrigger/dataEdit', //编辑
        dataDetail: 'alertTrigger/dataDetail', //详情
        equipmentAll: 'equipment/equipmentAll', //设备名称信息
        registerDetail: 'equiRegister/registerDetail',    //设备寄存器详细信息
        contactsGroup: 'alertContactsGroup/contactsGroup', //联系人/组所有信息
      }),
      conditionChange(val){
        if(val == 1 || val == 2) {
          this.triggerShow = false
          this.formItem.data_a = ''
          this.formItem.data_b = ''
        } else {
          this.triggerShow = true
          if (val == 3) {
            this.AShow = true
            this.BShow = false
            this.formItem.data_b = ''
          } else if (val == 4){
            this.AShow = false
            this.BShow = true
            this.formItem.data_a = ''
          } else if(val == 7){
            this.AShow = true
            this.BShow = false
            this.formItem.data_b = ''
          } else {
            this.AShow = true
            this.BShow = true
          }
        }
      },
      // 报警方式
      onChange(checkedValues) {
        console.log('checked = ', checkedValues)
        console.log(this.formItem);
      },
      // 触发状态
      onChange2(e) {
        console.log('radio2 checked', e.target.value)
      },
      handleChange(nextTargetKeys, direction, moveKeys) {
        this.formItem.contact_ids = nextTargetKeys
        console.log('targetKeys: ', nextTargetKeys);
      },
      handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
        this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]
      },
      /* 测试end */
      equiChange(val) {
        this.formItem.register_id = undefined
        this.formItem.contact_ids = []
        this.registerDetail(val)
        let idObj = {
            equipment_id: val,
        }
        this.contactsGroup(idObj)
      },
      	// 提交
      addBtn() {
      	this.confirmLoading = true;
        console.log(this.formItem);
        if (this.$route.params.id != undefined) {
          this.dataEdit(this.formItem);//编辑
        } else {
          this.dataAdd(this.formItem) //添加
        }
        setTimeout(() => {
          this.confirmLoading = false;
        }, 1000);
      },
      //返回
      returnBtn(){
        const that = this
        this.$confirm({
        	title: `您确定要返回触发器列表吗?`,
        	content: `返回触发器列表将不保留当前页输入数据!`,
        	okText: '确定',
        	okType: 'danger',
        	cancelText: '取消',
        	onOk() {
            that.$router.push('/alert/Trigger')
        	},
        });
      },
    }
  }
</script>

<style scoped>
  >>>.ant-card .ant-card-head {
    background: #666;
    color: #fff;
  }
</style>
